import React from 'react';
import { Form, Select, Button, Card, Radio, message } from 'antd';
import { connect } from 'dva';
import { findRefundSettingById, saveRefundSetting } from '../../services/API';

import styles from './index.less';

const { Option } = Select;

const namespace = 'RefundedSetting';
/**
 *  登录界面
 */
@connect(({ loading }) => ({
  loading
}))
@Form.create()
class RefundedSetting extends React.Component {
  state = {
    loading: false
  };
  // save
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields(async (err, values) => {
      if (!err) {
        const userInfo = JSON.parse(localStorage.getItem('userInfo'));
        this.setState({ loading: true });
        const result = await saveRefundSetting({
          refundTime: values.refundTime,
          reminderTime: values.refundReminder,
          shopId: userInfo.shopId
        });
        this.setState({ loading: false });
        if (result.code === 200) {
          message.success('Save successfully');
        }
        console.log('saveRefundSetting', result);
        // values = {
        //   ...values,
        //   hours12: 0,
        //   hours24: 0,
        //   hours36: 0,
        //   hours48: 0,
        //   oneday: 0,
        //   twodays: 0,
        //   threedays: 0,
        //   fourdays: 0
        // };
        // switch (values.refundTime) {
        //   case 2:
        //     values.twodays = 1;
        //     break;
        //   case 3:
        //     values.threedays = 1;
        //     break;
        //   case 4:
        //     values.fourdays = 1;
        //     break;
        //   default:
        //     values.oneday = 1;
        //     break;
        // }
        // values[`hours${values.refundReminder}`] = 1;
        // delete values.refundReminder;
        // delete values.refundTime;
        // console.log(values);
        // this.props.dispatch({
        //   type: `${namespace}/SysRefundTimeSave`,
        //   payload: {
        //     ...values,
        //     shopId: userInfo.shopId
        //   }
        // });
      }
    });
  };
  async componentDidMount() {
    this.setState({ loading: true });
    const resp = await findRefundSettingById();
    if (resp && resp.data) {
      this.props.form.setFieldsValue({
        refundTime: resp.data.refundTime,
        refundReminder: resp.data.reminderTime
      });
    }
    this.setState({ loading: false });
  }
  render() {
    const { getFieldDecorator } = this.props.form;
    const radioStyle = {
      display: 'block',
      height: '30px',
      lineHeight: '30px'
    };
    return (
      <div className={styles.RefundedSetting}>
        <Form onSubmit={this.handleSubmit} className={styles.listCard}>
          <Card title="Refund setting" bordered={false}>
            <h4>Please choose when the refund weill be triggered</h4>
            <Form.Item>
              {getFieldDecorator('triggered', {
                rules: [{ required: false, message: 'Please input your triggered!' }],
                initialValue: 2
              })(
                <Radio.Group onChange={this.onChange}>
                  {/* 在退货批准后 */}
                  <Radio style={radioStyle} value={1} disabled={true}>
                    After the return is approved
                  </Radio>
                  {/* ///卡车司机提货后 */}
                  <Radio style={radioStyle} value={2} checked={true}>
                    After the trucker picks up the goods
                  </Radio>
                  {/* 仓库收到货物并确认后 */}
                  <Radio style={radioStyle} value={3} disabled={true}>
                    After the warehouse receives the goods and confirms
                  </Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Card>
          <Card title="Refund time" bordered={false}>
            <h4>Please select the pending refund time.</h4>
            <Form.Item>
              {getFieldDecorator('refundTime', {
                rules: [{ required: true, message: 'Please input your Approval time!' }]
              })(
                <Select
                  style={{ width: '240px' }}
                  placeholder="Please input your Approval time!"
                  onChange={this.handleSelectChange}
                >
                  <Option value={1}>1 days</Option>
                  <Option value={2}>2 days</Option>
                  <Option value={3}>3 days</Option>
                  <Option value={4}>4 days</Option>
                  {/* <Option value={5}>72 days</Option> */}
                </Select>
              )}
            </Form.Item>
            <h4>Customer will be informed of the refund time</h4>
          </Card>
          <Card title="Refund reminder" bordered={false}>
            <h4>Set the reminder time for approvals that are due soon</h4>
            <Form.Item>
              {getFieldDecorator('refundReminder', {
                rules: [{ required: true, message: 'Please input your Approval reminder!' }]
              })(
                <Radio.Group onChange={this.onChange}>
                  <Radio style={radioStyle} value={12}>
                    12 hours before return approval is due
                  </Radio>
                  <Radio style={radioStyle} value={24}>
                    24 hours before return approval is due
                  </Radio>
                  <Radio style={radioStyle} value={36}>
                    36 hours before return approval is due
                  </Radio>
                  <Radio style={radioStyle} value={72}>
                    72 hours before return approval is due
                  </Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Card>
          <Form.Item
            style={{
              display: 'flex',
              justifyContent: 'center'
            }}
          >
            <Button
              style={{ padding: '0 80px', color: '#fff', background: '#333' }}
              type="primary"
              htmlType="submit"
              loading={this.state.loading}
              className="login-form-button"
            >
              Save
            </Button>
          </Form.Item>
        </Form>
      </div>
    );
  }
}
export default RefundedSetting;
